<template>
    <div class="tags-nav" v-if="allTag.length !== 0 || hotTag.length !== 0">
        <div class="tags">
            <!-- 全部标签 -->
            <div class="all" ref="alltaglist" @click="showAllTag">
                <span>{{tagTitle}} <i class="el-icon-arrow-down"></i></span>
            </div>
            <transition name="el-fade-in">
                <div class="all-tag-list" v-show="isShow">
                    <div class="all-tag">
                        <div class="all-tag-item" v-for="(item,index) in allTag" :key="index" @click="tagClickA(item.name, index, item.id)">
                            <span :class="{activeAll :currentIndexA == index}">{{item.name}}</span>
                        </div>
                    </div>
                </div>
            </transition>
            <!-- 热门标签 -->
            <div class="hot-tag">
                <div class="hot-tag-item" v-for="(item,index) in hotTag" :key="index"  :class="{ activeHot: currentIndexH == index }" @click="tagClickH(item.name, index, item.id)">
                    {{item.name}}
                </div>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    name:'',
    props:{
        allTag:{
            type:Array,
            default(){
                return []
            }
        },
        hotTag: {
			type: Array,
			default() {
				return [];
			},
		},
    },
    data() {
        return {
            tagTitle:"全部分类",
            currentIndexA: null, //用于所有标签和热门标签联动
            isShow:false,// 是否展示选项卡,
            currentIndexH:0,//用于所有标签和热门标签联动
        }
    },
    methods:{
        showAllTag(){
            this.isShow = !this.isShow
        },
        tagClickA(tagNameA,index,id){
            // 点击后绑定样式
            this.currentIndexA = index;
            // 触发父亲绑定的事件
            this.$emit('tagClick',tagNameA,id);
            // 热门标签和全部标签进行联动
            let indexH = this.hotTag.findIndex(item =>{
                return item.name = tagNameA;
            })
            // 给热门标签绑定样式
            this.currentIndexH = indexH;
            // 设置标签名
            this.tagTitle = tagNameA;
        },
        tagClickH(tagNameH, index, id){
            this.currentIndexH = index;
            this.$emit('tagClick',tagNameH,id);
            // 热门和全部标签联动
            let indexA = this.allTag.findIndex(item =>{
                return item.name == tagNameH;
            })
            this.currentIndexA = indexA;
            this.tagTitle = tagNameH;
        }
    },
    created(){
        
    },
    mounted() {
		// 点击其他区域关闭所有标签分类
		document.addEventListener("mouseup", e => {
			let allTagList = this.$refs.alltaglist;
			if (allTagList) {
				if (!allTagList.contains(e.target)) {
					this.isShow = false;
				}
			}
		});
	},
}
</script>
<style lang="less" scoped>
    .tags {
	position: relative;
	display: flex;
	justify-content: space-between;
	cursor: pointer;
	span:hover {
		color: var(--themeColor);
	}
	.hot-tag {
		width: 70%;
		display: flex;
		justify-content: space-between;
		.hot-tag-item {
			padding: 3px 8px;
		}
	}
}
.all {
	padding: 0 10px;
	border: 1px solid #dddddd;
	border-radius: 5px;
	&:hover {
		border-color: var(--mycompColor);
		color: var(--mycompColor);
	}
}
.all-tag-list::before {
	position: absolute;
	top: -30px;
	left: 15px;
	content: "";
	width: 0;
	height: 0;
	border: 15px solid;
	border-left-color: transparent;
	border-top-color: transparent;
	border-right-color: transparent;
	border-bottom-color: #fff;
}
.all-tag-list {
	position: absolute;
	top: 40px;
	left: 25px;
	z-index: 99;
}
.all-tag {
	display: grid;
	justify-content: space-around;
	align-content: space-between;
	grid-template-columns: repeat(4, 24%);
	width: 400px;
	height: 300px;
	overflow-y: scroll;
	overflow-x: hidden;
	background: #fff;
	box-shadow: 0px 0px 8px 3px #eee;
	// padding: 10px 0px;
	.all-tag-item {
		padding: 8px 0;
		width: 90px;
		text-align: center;
		span {
			padding: 3px 5px;
		}
	}
}
.activeHot {
	color: var(--mycompColor);
	background: var(--tagRgba);
	border-radius: 5px;
}
.activeAll {
	color: var(--mycompColor);
	background: var(--tagRgba);
	border-radius: 5px;
}

// 滚动条
::-webkit-scrollbar {
	width: 5px;
	height: 5px;
	background-color: #fff;
}
</style>